import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

export let mainRoute = [
  {
    path: '/Home/Index',
    name: 'Index',
    component: () => import('../views/Home/Index.vue')
  },
  {
    path: '/Home/Classify',
    name: 'Classify',
    component: () => import('../views/Home/Classify.vue')
  },
  {
    path: '/Home/Shop',
    name: 'Shop',
    component: () => import('../views/Home/Shop.vue')
  }, {
    path: '/Home/Me',
    name: 'Me',
    component: () => import('../views/Home/Me.vue')
  }
]
const routes = [
  {
    path: '/',
    redirect: '/Home/Index',  // 重定向:重新指向其它path,会改变网址
  },
  {
    path: '/Home',
    name: 'Home',
    component: Home,
    children:mainRoute
  },
  {
    path: '*',
    name: 'Erroy404',
    component: () => import('../views/Erroy404.vue')
  },    
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 全局前置守卫  访问每一个路由之前所触发的方法
// router.beforeEach((to, from) => {
//   // ...
//   // 返回 false 以取消导航
//   return false
// })
// 路由独享的守卫   就是给单个路由添加导航守卫，也就是只守卫一个路由
// const routes = [
//   {
//     path: '/users/:id',
//     component: UserDetails,
//     beforeEnter: (to, from) => {
//       // reject the navigation
//       return false
//     },
//   },
// ]
// 全局后置钩子  就是每一个路由跳转完成以后触发的方法
// router.afterEach((to, from) => {
  // sendToAnalytics(to.fullPath)
// })

const whiteList = ['/Login','/Detail:id']
router.beforeEach((to, from , next) => {
  console.log(to,'---to');   // 是要跳转那个路由的所有详细信息
  console.log(from,'---from');  // 是从那个路由跳转过来的那个路由的所有详细信息
  let token = window.localStorage.getItem('token');
  if(token || whiteList.includes(to.path)){
    next()
  }else{
    next('/Login');
  }
  // ...
  // 返回 false 以取消导航
  // return false
})




// 后端返回路由
// axios.get('/Login').then(res=>{
// })

// data:{
    //     role : '权限信息',
    //     roleCode : 123456,   // 后台管理员
    // }
// })  

// 前端路由

// let newList = {
//   roleCode : 123456,
// }
// newList.filter(item => {
//   return item.roleCode === data.roleCode;
// });

// router.addRoute(newList)





// 动态路由  (一级路由 ： 无需再次引入)
// let newList = {
//   path:'/Login',
//   name:'Login',
//   component: () => import('../views/Login.vue')
// }
// router.addRoute(newList)      // 单个路由直接抛出即可
let newList =  [
  {
    path: '/Login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/Detail/:id',
    name: 'Detail',
    component: () => import('../views/Detail.vue')
  }
]
newList.forEach((item,index)=>{    // 多个路由成数组进行循环抛出
  router.addRoute(item);
})


// console.log(router,'----router');
export default router
